<template>
	<view v-if="showselected">
		<view class="tabbar">
			<view class="navigator">
				<view style="display: none;">{{Appstatus}}</view>
				<view class="navigator-item" v-for="(item,index) in tabBar.list" :key="item.pagePath"
					@click="switchTab(item,index)">
					<img :src="item.iconPath" class="icon" v-if="selectedIndex !== index">
					<img :src="item.selectedIconPath" class="icon" v-else>
					<text :class="['item-text',{'text-active':selectedIndex === index}]">{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			selectedIndex: {
				type: Number,
				required: true,
			}
		},
		data() {
			return {
				showselected: true, // 是否在页面使用tarBar
				tabBar: {
					list: [
				
					]
				}
			}
		},
		watch: {},
		computed: {
			address() {
				return this.$store.getters.getAddress;
			},
			addressInfo() {
				return this.$store.getters.addressInfo
			},
			Appstatus() {
				if (this.$store.getters.Appstatus == 0) {
					this.$set(this.tabBar, 'list', [{
							"pagePath": "pages/index/index",
							"iconPath": "static/images/tabbar/home.png",
							"selectedIconPath": "static/images/tabbar/home-active.png",
							"text": "钱包"
						},
						{
							"pagePath": "pages/market/index",
							"iconPath": "static/images/tabbar/trade.png",
							"selectedIconPath": "static/images/tabbar/trade-active.png",
							"text": "交易"
						},
						{
							"pagePath": "pages/broswer/broswer",
							"iconPath": "static/images/tabbar/browser.png",
							"selectedIconPath": "static/images/tabbar/browser-active.png",
							"text": "发现"
						},
						{
							"pagePath": "pages/personal/personal",
							"iconPath": "static/images/tabbar/personal.png",
							"selectedIconPath": "static/images/tabbar/personal-active.png",
							"text": "我的"
						}
					])
				} else if (this.$store.getters.Appstatus == 1) {
					this.$set(this.tabBar, 'list', [{
							"pagePath": "pages/index/index",
							"iconPath": "static/images/tabbar/home.png",
							"selectedIconPath": "static/images/tabbar/home-active.png",
							"text": "钱包"
						},
						{
							"pagePath": "pages/personal/personal",
							"iconPath": "static/images/tabbar/personal.png",
							"selectedIconPath": "static/images/tabbar/personal-active.png",
							"text": "我的"
						}
					])
				}
				return this.$store.getters.Appstatus
			}
		},
		mounted() {},
		methods: {
			switchTab(item, index) {
				if (!this.address) {
					uni.showToast({
						title: '请创建或导入钱包',
						icon: "none",
						position: 'bottom'
					})
					return false
				}
				if (this.addressInfo.importMethod == 4) {
					uni.showToast({
						title: "观察钱包没有操作权限",
						position: "bottom",
						icon: 'none'
					});
					uni.switchTab({
						url: "/pages/index/index"
					})
					return false
				}
				this.$emit('pagechange', index)
				let url = '/' + item.pagePath
				let pagePath = url
				// this.tabBar.list.forEach((v, i) => {
				// 	if (item.pagePath === v.pagePath) {
				// 		uni.setStorageSync('selectedIndex', index);
				// 	}
				// })
				uni.switchTab({
					url
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.tabbar {
		width: 100%;
		height: 110upx;
		box-sizing: border-box;
		background: #fff;
		padding: 10upx 0upx;
		box-shadow: 0upx -2upx 10upx rgba(0, 0, 0, .05);
		position: relative;
		z-index: 10;
		position: fixed;
		left: 0upx;
		right: 0upx;
		bottom: 0upx;

		.navigator {
			display: flex;
			justify-content: space-between;
			width: 85%;
			margin: 0 auto;
			padding: 10upx 20upx;

			.navigator-item {
				display: flex;
				align-items: center;
				flex-direction: column;
				width: 50upx;
				height: 100%;

				.item-text {
					margin-top: 10upx;
					color: #7A7E83;
					font-size: 24upx;
				}

				.text-active {
					color: #297814 !important;
				}

				.icon {
					width: 20px;
					height: 20px;
				}
			}
		}


	}
</style>